<route lang="json5">
	{
	needLogin: true,
	style: {
	navigationStyle: 'default',
	navigationBarTitleText: '课程详情',
	},
	}
</route>
<template>
	<view class="course-detail flex flex-col">
		<l-fab @click="onClick" axis="xy" gap="8rpx" v-model:offset="offset" v-if="videoShow">
			<view class="w-40rpx h-40rpx absolute z-1002 top-0 right-2rpx flex items-center justify-center">
				<wd-icon name="close-circle-filled" custom-class="!w-40rpx !h-40rpx" color="#3670F7"
					@click.stop="handleClose"></wd-icon>
			</view>
			<yingbing-video :barrage-show="false" ref="video" :title="courseDetail.name" :autoplay="false" muted
				:src="currentVideoUrl" settings="playbackRate,mirror,pictureInPicture" :poster="currentVideoCover" />
		</l-fab>

		<!-- 骨架屏 -->
		<wd-skeleton v-if="loading" :loading="loading" animation="gradient">
			<view class="skeleton-content">
				<view class="skeleton-video"></view>
			</view>
		</wd-skeleton>

		<!-- 实际内容 -->
		<template v-else-if="courseDetail">
			<view class="course-main relative">
				<wd-img :src="courseDetail.cover" custom-class="header-main"></wd-img>
				<view class="black-overlay"></view>
				<view class="course-header relative pt-36rpx pb-0 pl-41rpx flex">
					<wd-img :src="courseDetail.cover" radius="10rpx"
						custom-class="course-cover w-348rpx h-357rpx"></wd-img>
					<view class="z-100">
						<!-- 发布状态标签 -->
						<view class="status-tag" :class="
                courseDetail.status === '1'
                  ? 'bg-[rgba(69,138,254)] text-[#fff]'
                  : 'bg-[#FE8F1E] text-[#fff]'
              ">
							<image src="/static/images/course/publish.png" mode="aspectFill"
								class="w-36rpx h-36rpx mr-8rpx" />
							{{ courseDetail.status === '1' ? '已发布' : '未发布' }}
						</view>
						<view
							class="course-title text-34rpx font-bold text-[#FFFFFF] mt-33rpx ml-18rpx mr-76rpx lh-48rpx">
							{{ courseDetail.name }}
						</view>
						<view class="student-info flex items-center">
							<image src="/static/images/course/user-white.png" mode="aspectFill" class="shadow-icon" />
							<text class="text-22rpx">学生：</text>
							<text class="text-26rpx font-500">
								{{ courseDetail?.studentCount || 0 }}
							</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 简介和目录切换 -->
			<view class="mt-32rpx bg-white h-auto pt-53rpx relative z-200 flex-1">
				<!-- 功能导航 -->
				<view class="absolute top--102rpx w-[100%]">
					<view class="nav-section rounded-[10rpx] bg-white">
						<view class="grid grid-cols-4 py-29rpx">
							<view v-for="(item, index) in navItems" :key="index"
								class="nav-item flex flex-col items-center" @click="handleNavClick(item)">
								<view class="w-50rpx h-50rpx mb-10rpx">
									<image :src="item.icon" class="w-50rpx h-50rpx" />
								</view>
								<text class="text-22rpx text-[#3D3D3D]">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>

				<view
					class="tab-container flex items-center text-center font-bold text-30rpx text-[#999999] lh-41rpx h-92rpx">
					<view @click="handleChangeTab(0)" class="tab-item flex-1"
						:class="activeTab === 0 ? 'tab-active text-36rpx text-[#3D3D3D] lh-49rpx' : ''">
						课程介绍
					</view>
					<view @click="handleChangeTab(1)" class="tab-item flex-1"
						:class="activeTab === 1 ? 'tab-active text-36rpx text-[#3D3D3D] lh-49rpx' : ''">
						课程目录
					</view>
				</view>
				<view class="course-content">
					<!-- 课程简介 -->
					<view class="course-desc" v-if="activeTab === 0">
						<text>{{ courseDetail.content }}</text>
					</view>
					<view class="course-catalog" v-if="activeTab === 1">
						<wd-collapse v-model="activeNames" accordion>
							<!-- 章 -->
							<wd-collapse-item v-for="(chapter, index) in courseDetail.chaptersBoList" :key="chapter.id"
								:title="`第${index + 1}章 ${chapter.name}`" :name="String(index)" class="chapter-item">
								<!-- 节 -->
								<view v-for="(section, sIndex) in chapter.sectionsBos" :key="section.id"
									class="section-wrapper">
									<view class="section-title">
										<view class="title-left">
											<!-- <wd-circle
                        :model-value="10"
                        :strokeWidth="4"
                        :size="12"
                        color="#3670F7"
                      ></wd-circle> -->
											<text>{{ `第${sIndex + 1}节、 ${section.name}` }}</text>
										</view>
									</view>

									<!-- 合并后的资源列表 -->
									<view class="resources-list">
										<view v-for="(resource, rIndex) in getAllResources(section)"
											:key="resource.resourceId || resource.uid" class="resource-item"
											@click="handleResourceClick(resource)">
											<view class="flex items-center w-full pl-32rpx">
												<view class="resource-type shrink-0 mr-2" :class="
                            (resource?.resourceId || resource?.uid) == activeShowId
                              ? 'resource-type-active'
                              : ''
                          ">
													{{
                            resource.resourceId
                              ? getResourceIcon(resource?.type)
                              : getFileTypeDesc(getFileIconByPath(resource?.url))
                          }}
												</view>
												<text class="resource-name truncate flex-1">
													{{
                            `${sIndex + 1}.${rIndex + 1} ${resource.resourceName || resource.name}`
                          }}
												</text>
											</view>
											<!-- 添加特殊资源提示 -->
											<view class="resource-tips shrink-0"
												v-if="isWebOnlyResource(resource.type)">
												<text class="web-only-tag">仅支持web端查看</text>
											</view>
										</view>
									</view>
								</view>
							</wd-collapse-item>
						</wd-collapse>
					</view>
					<view class="fixed bottom-34rpx left-0rpx w-full">
						<view class="text-center pl-64rpx pr-72rpx" v-if="courseDetail.status !== '1'">
							<wd-button custom-class="custom-shadow" block @click="publishCourses">
								发布课程
							</wd-button>
						</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 加载失败提示 -->
		<template v-else>
			<!-- <view class="empty-state">
        <text>课程信息加载失败</text>
        <button @click="getCourseDetail">重试</button>
      </view> -->
		</template>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { addPublishData, getLessonInfo } from '@/service/edu/lesson/lessonMain'
	import { getFileIconByPath, getFileTypeDesc, getResourceIcon } from '@/utils/file'
	import { useGroupStore } from '@/store'

	// 定义课程详情接口
	interface Teacher {
		name : string
		title : string
		avatar : string
	}

	interface Resource {
		name : string
		type : 'video' | 'pdf' | 'doc' | 'ppt' | 'xls' | 'model' | 'image' | 'simulation'
		url : string
		size : string
		coverUrl ?: string
	}

	interface resources {
		type : string
		fileInfo : any
		cover : string
		resourceId : string | number | symbol
		resourceName : string
		path ?: string
		resources : Resource[]
		localFileResources : Resource[]
	}

	interface sectionsBos {
		localFileResources : any
		id : string | number | symbol
		name : string
		resources : resources[]
	}

	interface Chapter {
		id : string | number | symbol
		name : string
		sectionsBos : sectionsBos[]
	}

	interface CourseDetail {
		videoUrl : any
		headshot : string
		studentCount : string | number
		id : string
		teacherId : string
		teacherName : string
		name : string
		content : string
		cover : string
		chaptersBoList : Chapter[]

		title : string
		coverUrl : string
		description : string
		status : string
		teacher : Teacher
		highlights : string[]
		suitableCrowd : string[]
		chapters : Chapter[]
	}

	// 响应数据
	const loading = ref(true)
	const activeNames = ref(['0'])
	const activeTab = ref(0)
	const courseId = ref('')
	const courseDetail = ref<CourseDetail>()
	const currentVideoUrl = ref('')
	const currentVideoCover = ref('')
	const activeShowId = ref<string | number | symbol>('')
	const videoShow = ref(false)
	const offset = ref([50, 0])

	function onClick() {
		console.log('点击气泡')
	}
	function handleClose() {
		videoShow.value = false
	}
	function handleVideo() { }

	const navItems = ref([
		{
			icon: '/static/images/course/discuss.png',
			title: '分组讨论',
			type: 'group',
		},
		{
			icon: '/static/images/course/task.png',
			title: '学习任务',
			type: 'task',
		},
		{
			icon: '/static/images/course/class.png',
			title: '班级管理',
			type: 'class',
		},
		{
			icon: '/static/images/course/analysis.png',
			title: '学情分析',
			type: 'analysis',
		},
	])
	const groupStore = useGroupStore()
	// 处理导航点击
	const handleNavClick = (item : any) => {
		if (item.type === 'group') {
			if (courseDetail.value.status !== '1') {
				uni.showToast({
					title: '课程还未发布哦',
					icon: 'none',
				})
				return
			}
			groupStore.setCreateType(false)
			groupStore.setFriendIds([])
			uni.navigateTo({
				// url: `/pages/group/create-group?courseId=${courseDetail.value.id}`,
				url: `/pages/group/index?courseId=${courseDetail.value.id}`,
			})
		} else if (item.type === 'task') {
			uni.navigateTo({
				url: `/pages/task/index?courseId=${courseDetail.value.id}&courseName=${courseDetail.value.name}`,
			})
		} else if (item.type === 'class') {
			uni.navigateTo({
				url: `/pages/class/index?courseId=${courseDetail.value.id}&page=${item.type}&status=${courseDetail.value.status}`,
			})
		} else if (item.type === 'analysis') {
			if (courseDetail.value.status !== '1') {
				uni.showToast({
					title: '课程还未发布哦',
					icon: 'none',
				})
				return
			}
			uni.navigateTo({
				url: `/pages/analysis/index?courseId=${courseDetail.value.id}`,
			})
		}
	}

	// 获取课程详情
	const getCourseDetail = async () => {
		try {
			loading.value = true
			const pages = getCurrentPages()
			const currentPage : any = pages[pages.length - 1]
			const options = currentPage.$page?.options || currentPage?.options || currentPage.$route.query
			const id = options?.id

			if (!id) {
				uni.showToast({
					title: '课程ID不存在',
					icon: 'none',
				})
			}
			courseId.value = id
			await handleInfo()
		} catch (error) {
			uni.showToast({
				title: '获取课程详情失败',
				icon: 'none',
			})
		} finally {
			loading.value = false
		}
	}
	async function handleInfo() {
		const res : any = await getLessonInfo({
			id: courseId.value,
		})
		if (res.code === 200) {
			courseDetail.value = res?.data
			courseDetail.value.content = courseDetail.value.content.replace(
				/\n/g,
				'\n\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0',
			) // 每个换行符后添加两个空格
			// 初始化默认视频
			// initDefaultVideo()
		}
	}

	// 初始化默认视频
	const initDefaultVideo = () => {
		if (!courseDetail.value) return
		if (courseDetail.value.chaptersBoList && courseDetail.value.chaptersBoList.length > 0) {
			for (const chapter of courseDetail.value.chaptersBoList) {
				if (chapter.sectionsBos && chapter.sectionsBos.length > 0) {
					if (chapter.sectionsBos[0].resources && chapter.sectionsBos[0].resources.length > 0) {
						// 查找第一个视频资源
						const videoResource =
							getFileIconByPath(chapter.sectionsBos[0].resources[0]?.path) === 'video'
						if (videoResource) {
							currentVideoUrl.value = chapter.sectionsBos[0].resources[0]?.path
							currentVideoCover.value =
								chapter.sectionsBos[0].resources[0]?.cover || courseDetail.value.cover
							activeShowId.value = chapter.sectionsBos[0].resources[0]?.resourceId
							return
						}
					}
				}
			}
		}

		// 如果没有找到视频资源，使用课程封面
		currentVideoCover.value = courseDetail.value?.cover
	}

	// 获取文件类型显示文字
	const getFileTypeText = (fileType : string) => {
		const typeMap : Record<string, string> = {
			'video/mp4': '视频',
			'application/pdf': 'PDF',
			'application/msword': 'Word',
			'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word',
			'application/vnd.ms-excel': 'Excel',
			'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel',
			'application/vnd.ms-powerpoint': 'PPT',
			'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PPT',
			'image/jpeg': '图片',
			'image/png': '图片',
		}
		return typeMap[fileType] || '文档'
	}

	// 修改处理资源点击的方法
	const handleResourceClick = async (resource : any) => {
		const resourceType = getFileIconByPath(resource?.path || resource?.url)
		const fileUrl = resource?.path || resource?.url

		// 如果没有资源链接，提示错误
		if (!fileUrl) {
			uni.showToast({
				title: '资源链接不存在',
				icon: 'none',
			})
			return
		}

		try {
			switch (resourceType) {
				case 'video':
					// 视频资源
					currentVideoUrl.value = fileUrl
					activeShowId.value = resource?.resourceId || resource?.uid
					videoShow.value = true
					break

				case 'image':
					// 图片预览
					uni.previewImage({
						urls: [fileUrl],
						current: fileUrl,
					})
					break

				case 'doc':
				case 'pdf':
				case 'ppt':
				case 'xls':
					// 文档预览
					uni.navigateTo({
						url: `/pages/preview/document?url=${encodeURIComponent(fileUrl)}&name=${encodeURIComponent(resource.resourceName || resource.name)}`,
					})
					break

				case 'simulation':
					// 虚拟仿真
					// #ifdef H5
					window.open(fileUrl, '_blank')
					// #endif
					// #ifndef H5
					uni.showToast({
						title: '虚拟仿真仅支持web端查看',
						icon: 'none',
					})
					// #endif
					break

				case 'mirror':
					// 镜像文件
					// #ifdef H5
					window.open(fileUrl, '_blank')
					// #endif
					// #ifndef H5
					uni.showToast({
						title: '镜像文件仅支持web端查看',
						icon: 'none',
					})
					// #endif
					break

				case 'model':
					uni.showToast({
						title: '仅支持web端查看',
						icon: 'none',
					})
					// 3D模型
					// uni.navigateTo({
					//   url: `/pages/preview/document?url=${encodeURIComponent(fileUrl)}&name=${encodeURIComponent(resource.resourceName || resource.name)}`,
					// })
					break

				default:
					uni.showToast({
						title: '仅支持web端查看',
						icon: 'none',
					})
				//   // 其他类型文件下载
				//   uni.showLoading({
				//     title: '正在下载...',
				//   })

				//   // #ifdef H5
				//   window.open(fileUrl, '_blank')
				//   uni.hideLoading()
				//   // #endif

				//   // #ifndef H5
				//   try {
				//     const res = await uni.downloadFile({
				//       url: fileUrl,
				//       success: (downloadRes) => {
				//         if (downloadRes.statusCode === 200) {
				//           uni.openDocument({
				//             filePath: downloadRes.tempFilePath,
				//             showMenu: true,
				//             success: () => {
				//               console.log('打开文档成功')
				//             },
				//             fail: () => {
				//               uni.showToast({
				//                 title: '打开文件失败',
				//                 icon: 'none',
				//               })
				//             },
				//           })
				//         }
				//       },
				//       fail: () => {
				//         uni.showToast({
				//           title: '下载失败',
				//           icon: 'none',
				//         })
				//       },
				//       complete: () => {
				//         uni.hideLoading()
				//       },
				//     })
				//   } catch (error) {
				//     uni.hideLoading()
				//     uni.showToast({
				//       title: '下载失败',
				//       icon: 'none',
				//     })
				//   }
				// // #endif
			}
		} catch (error) {
			console.error('处理资源失败:', error)
			uni.showToast({
				title: '打开资源失败',
				icon: 'none',
			})
		}
	}

	// 在组件挂载时获取课程详情
	onLoad(() => {
		getCourseDetail()
	})

	// 播放课程章节
	const playSection = (section : any) => {
		courseDetail.value.videoUrl = section.videoUrl
	}

	// 模拟加载过程
	setTimeout(() => {
		loading.value = false
	}, 1500)

	// 添加载资源方法
	const downloadResource = (resource : any) => {
		// 处理资源下载逻辑
		console.log('下载资源:', resource.url)
	}

	// 添加判断是否为仅支持web端的资源方法
	const isWebOnlyResource = (type : string) => {
		return type === '3' || type === '4' || type === '5' //  3-虚拟仿真 4-镜像 5-模型
	}

	// 获取所有资源(合并小节资源和其他资源)
	const getAllResources = (section : any) => {
		const allResources = []

		// 添加小节资源
		if (section.resources && section.resources.length) {
			allResources.push(...section.resources)
		}

		// 添加其他资源
		if (section.localFileResources && section.localFileResources.length) {
			allResources.push(...section.localFileResources)
		}

		return allResources
	}
	function handleChangeTab(active) {
		activeTab.value = active
	}
	function publishCourses() {
		uni.showModal({
			title: '提示',
			content: '确定发布该课程吗？',
			success: async (res) => {
				try {
					if (res.confirm) {
						const data = await addPublishData({
							id: courseDetail.value.id,
							status: '1',
						})
						handleInfo()
						console.log('data====', data)
					}
				} catch (e) {
					console.error('发布失败', e)
				} finally {
					console.info('发布状态')
				}
			},
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.l-fab) {
		width: 560rpx;
		height: 315rpx;
		background: #ffffff;
		border-radius: 20rpx;
	}

	.custom-shadow {
		height: 86rpx !important;
		background: linear-gradient(90deg, #20a4ff 2%, #0d53ff 100%) !important;
		border-radius: 50rpx !important;
		font-size: 22rpx;
	}

	:deep(.wd-collapse-item__header) {
		background-color: #f7f7f7;
	}

	/* 隐藏水平和垂直滚动条 */
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
	}

	.tab-active {
		position: relative;
	}

	.tab-active::after {
		position: absolute;
		bottom: -16rpx;
		left: 44%;
		width: 44rpx;
		height: 9rpx;
		content: '';
		background: #3670f7;
		border-radius: 6rpx;
	}

	.course-main {
		width: 100%;
		height: 427rpx;
		overflow: hidden;
		/* 防止内容溢出 */
		background: rgba(0, 0, 0, 0.24);
	}

	.header-main {
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-filter: blur(8px);
		/* Chrome, Safari */
		filter: blur(8px);
	}

	.black-overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.nav-section {
		height: 147rpx;
		margin: 0 23rpx 0 24rpx;
		box-shadow: 0px 5rpx 26rpx 0px rgba(52, 76, 101, 0.11);
	}

	.course-header {
		width: 100%;
		height: 100%;
		border-radius: 0px 0px 0px 0px;

		.course-cover {
			border-radius: 10rpx;
		}

		.status-tag {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 138rpx;
			height: 47rpx;
			margin-top: 24rpx;
			font-size: 20rpx;
			font-weight: bold;
			backdrop-filter: blur(4px);
			border-radius: 4rpx;
		}

		.shadow-icon {
			width: 26rpx;
			height: 26rpx;
			margin-right: 8rpx;
		}

		.student-info {
			justify-content: center;
			width: 198rpx;
			height: 54rpx;
			margin-top: 42rpx;
			margin-left: 17rpx;
			font-size: 22rpx;
			color: #ffffff;
			background: rgba(0, 0, 0, 0.17);
			border-radius: 27px 27px 27px 27px;
		}
	}

	.course-detail {
		box-sizing: border-box;
		min-height: calc(100vh);
		overflow: hidden;
		background-color: #f2f2f6;

		.course-video {
			width: 100%;
			height: 422rpx;
		}

		.tab-container {
			box-sizing: border-box;

			:deep(.wd-tabs) {
				position: sticky;
				top: 0;
				z-index: 1;
				width: 94% !important;
				background: #fff;

				:deep(.wd-tabs__nav) {
					padding: 0 32rpx;
				}

				:deep(.wd-tabs__line) {
					width: 32rpx !important;
					height: 4rpx;
					border-radius: 4rpx;
				}
			}

			:deep(.wd-sticky__container) {
				border-bottom: 1rpx solid #cccccc !important;
			}
		}

		.course-catalog {
			box-sizing: border-box;
			padding: 24rpx;
			background-color: #fff;

			.chapter-item {
				margin-bottom: 16rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}

			.section-wrapper {
				border-bottom: 1rpx solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.section-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 32rpx 24rpx 8rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #333;
					background-color: #fff;

					.title-left {
						display: flex;
						gap: 16rpx;
						align-items: center;

						.progress-circle {
							position: relative;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 40rpx;
							height: 40rpx;
							font-size: 24rpx;
							color: #666;
							background: #f0f0f0;
							border-radius: 50%;

							&::after {
								position: absolute;
								box-sizing: border-box;
								width: 100%;
								height: 100%;
								content: '';
								border: 2rpx solid #ddd;
								border-radius: 50%;
							}

							// 可以根据实际进度添加不同的样式
							&.completed {
								color: #1890ff;
								background: #e6f7ff;

								&::after {
									border-color: #1890ff;
								}
							}
						}
					}
				}

				.resources-list {
					.resource-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 24rpx 0 24rpx 0;
						background-color: #fff;
						border-bottom: 1rpx solid #f5f5f5;

						&:last-child {
							border-bottom: none;
						}

						&:active {
							background-color: #f8f8f8;
						}

						.resource-type {
							min-width: 60rpx;
							padding: 2rpx 8rpx;
							font-size: 24rpx;
							text-align: center;
							border: 1px solid #999999;
							border-radius: 6rpx;
						}

						.resource-type-active {
							color: #3670f7 !important;
							border: 1px solid #3670f7 !important;
						}

						.resource-name {
							padding-right: 24rpx;
							font-size: 28rpx;
							color: #333;
							word-break: break-all;
						}

						.resource-tips {
							margin-right: 8rpx;
							margin-left: 16rpx;

							.web-only-tag {
								padding: 4rpx 12rpx;
								font-size: 24rpx;
								color: #ff9c5a;
								white-space: nowrap;
								background: rgba(255, 156, 90, 0.1);
								border-radius: 4rpx;
							}
						}
					}
				}
			}
		}

		.course-info {
			.course-title {
				font-size: 40rpx;
				font-weight: 600;
				line-height: 1.4;
				color: #333;
			}

			.teacher-info {
				padding: 0 0 32rpx 0;
				border-bottom: 1px solid #f5f5f5;

				.teacher-name {
					font-size: 32rpx;
					font-weight: bolder;
					color: #3d3d3d;
				}

				.teacher-title {
					margin-top: 4rpx;
					font-size: 28rpx;
					color: #999999;
				}

				.teacher-avatar {
					width: 90rpx;
					height: 90rpx;
				}
			}
		}

		.course-desc {
			padding: 10rpx 23rpx 24rpx 24rpx;
			font-size: 26rpx;
			line-height: 1.8;
			color: #b2b5bd;
			text-indent: 2em;
			/* 首行缩进两格 */
			letter-spacing: 0px;
			white-space: pre-wrap;
		}

		.course-desc,
		.course-highlights,
		.suitable-crowd {
			border-bottom: 1px solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.font-bold {
				margin-bottom: 24rpx;
				font-size: 32rpx;
				color: #333;
			}
		}

		.highlight-item,
		.crowd-item {
			margin-bottom: 24rpx;
			font-size: 28rpx;
			color: #666;

			&:last-child {
				margin-bottom: 0;
			}

			.text-primary {
				color: #ff9c5a;
			}
		}
	}
</style>